<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../phaser.js"></script>
  <style>
    body{

    }
  </style>
</head>
<body>
  <script>
    //生成配置文件
    const config = {
      //初始化游戏类型
      type : Phaser.AUTO,
      width : 800,
      height : 600,
      //物理引擎
      physics : {
        default : 'arcade',
        arcade : {
          //重力设置
          gravity : {y : 300},
          debug : false
        }
      },
      //场景设置
      scene : {
        preload,
        create,
        update
      }
    }
    //初始化游戏
    let game = new Phaser.Game(config)
    let score = 0
    let scoreText
    let gameover = false
    //游戏主要函数
    function preload()
    {
      this.load.image("sky","./img/sky.png")
      this.load.image("star","./img/star.png")
      this.load.image("ground","./img/platform.png")
      this.load.image("bomb","./img/bomb.png")
      this.load.spritesheet("dude","./img/dude.png",{frameWidth:32,frameHeight:48})
    }

    function create()
    {
      this.add.image(400,300,"sky")

      platforms = this.physics.add.staticGroup()

      platforms.create(400,568,"ground").setScale(2,2).refreshBody()

      platforms.create(600,400,"ground")
      platforms.create(0,300,"ground")
      platforms.create(600,200,"ground")

      player = this.physics.add.sprite(100,450,'dude')
      player.setBounce(0.2)
      player.setCollideWorldBounds(true)

      this.physics.add.collider(player,platforms)

      this.anims.create({
        key : 'left',
        frames : this.anims.generateFrameNumbers('dude',{start : 0,end : 3}),
        frameRate : 10,
        repeat : -1
      })

      this.anims.create({
        key : 'turn',
        frames : [{key : 'dude',frame : 4}],
        frameRate : 20
      })

      this.anims.create({
        key : 'right',
        frames : this.anims.generateFrameNumbers('dude',{
          start : 5,end : 8
        }),
        frameRate : 10,
        repeat : -1
      })

      cursors = this.input.keyboard.createCursorKeys()

      stars = this.physics.add.group({
        key : 'star',
        repeat : 11,
        setXY : {x: 20,y: 0,stepX:70}
      })

      stars.children.iterate(function(child){
        //设置一下碰撞效果
        child.setBounceY(Phaser.Math.FloatBetween(0.4,0.8))
      })

      this.physics.add.collider(stars,platforms)
      this.physics.add.overlap(player,stars,collectStar,null,this)
      bombs = this.physics.add.group()
      scoreText = this.add.text(16,16,"score : 0",{fontSize: '32px',fill: "#000"})
      this.physics.add.collider(bombs,platforms)
      this.physics.add.collider(player,bombs,bombbbb,null,this)
    }

    function update()
    {
      if(cursors.left.isDown)
      {
        player.setVelocityX(-200)

        player.anims.play("left",true)
      }
      else if(cursors.right.isDown)
      {
        player.setVelocityX(200)

        player.anims.play("right",true)
      }
      else{
        player.setVelocityX(0)

        player.anims.play('turn')
      }

      if(cursors.up.isDown && player.body.touching.down){
        player.setVelocityY(-400)
      }
    }

    function collectStar(player,star)
    {
      //让star实体消失
      star.disableBody(true,true)

      score += 1000
      scoreText.setText("score :"+ score)
      if(stars.countActive(true) === 0)
      {
        stars.children.iterate(function(child)
        {
          child.enableBody(true,child.x,0,true,true)
        })
        var x = (player.x<400)?Phaser.Math.Between(400,800):Phaser.Math.Between(0,400)

        var bomb = bombs.create(x,16,'bomb')
        bomb.setBounce(true)
        bomb.setCollideWorldBounds(true)
        bomb.setVelocity(Phaser.Math.Between(-200,200),20)
        bomb.allowGravity = false
      }
    }

  function bombbbb()
  {
    this.physics.pause()

    //涂色，我觉得绿绿的比较好看
    player.setTint(0x00ff00)

    player.anims.play("turn")

    gameover = true
  }
  </script>
</body>
</html>